<template>
  <div id="sidebar">
    <avatar></avatar>
    <div class="icons">
      <router-link to="/note" title="笔记"><i class="iconfont icon-record"></i></router-link>
      <router-link to="/notebooks" title="笔记本"><i class="iconfont icon-biji"></i></router-link>
      <router-link to="/trash" title="回收站"><i class="iconfont icon-huishouzhan"></i></router-link>
    </div>
    <div class="logout">
      <i class="iconfont icon-tuichu" @click="onLogout"></i>
    </div>
  </div>
</template>
<script>
import Avatar from '@/components/Avatar.vue'
import {mapActions} from 'vuex'

export default {
  name: 'sidebar',
  components: {
    Avatar: Avatar
  },
  methods: {
    ...mapActions(['logout']),
    onLogout(){
      this.logout({path: '/login'})
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
#sidebar {
  position: relative;
  width: 56px;
  text-align: center;
  background-color: #2c333c;
  .icons {
    margin-top: 15px;
    a {
      padding: 6px 0;
      display: block;
    }
    .router-link-active {
      background-color: #5e6266;
    }
    .iconfont {
      color: #fff;
    }
  }

  .logout {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    .iconfont {
      color: #fff;
    }
  }
}
</style>
